<template>
	<view class="bg-white" style="height: 100vh;">
		<cu-custom :bgColor="NavBarColor" :isBack="true" backFlag="navigate">
			<block slot="backText">返回</block>
			<block slot="content">移库确认详情</block>
		</cu-custom>
		<view>
			<view class="desc">
				<view class="title">物料条码</view>
				<input placeholder="" name="input" class="input-border" v-model="materialBarcode"
					@input="handleMaterialInput" :focus="materialFocus" auto-focus></input>
			</view>
			<view class="desc">
				<view class="title">库位条码</view>
				<input placeholder="" name="input" class="input-border" v-model="locationBarcode" 
				 @input="handleLocationInput" :focus="locationFocus"></input>
			</view>

			<view class="title">移库详情：</view>
			<view class="input-border" style="font-size: 13px;">
				<view class="container">
					<view>编号：
					</view>
					<view v-html="detail.bussStorageNoticeCode">
					</view>

				</view>
				<view class="container">
					<view>产品编码：
					</view>
					<view v-html="detail.bussStorageNoticeCode">
					</view>
					<view>批号：
					</view>
					<view v-html="detail.materialCode">
					</view>
				</view>
				<view class="container">
					<view>生产日期：
					</view>
					<view v-html="detail.oriWarehouse_dictText">
					</view>
					<view>货位：
					</view>
					<view v-html="detail.oriLocation_dictText">
					</view>
				</view>
				<view class="container">
					<view>品名：
					</view>
					<view v-html="detail.goalWarehouse_dictText">
					</view>
					<view>规格：
					</view>
					<view v-html="detail.goalLocation_dictText">
					</view>
				</view>
				<view class="container">
					<view>限用日期：
					</view>
					<view v-html="detail.goalWarehouse_dictText">
					</view>
					<view>来源：
					</view>
					<view v-html="detail.goalLocation_dictText">
					</view>
				</view>
			</view>




			<view class="padding flex flex-direction">
				<button class="cu-btn bg-blue lg" @click="submitConfirm(detail)">确认</button>
			</view>

			<view class="padding flex flex-direction">
				<button class="cu-btn bg-blue lg" @click="clearBarcode()">清空条码</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from '@/common/service/service.js'
	export default {
		data() {
			return {
				NavBarColor: this.NavBarColor,
				erpGoodsId: '',
				materialBarcode: '',
				locationBarcode: '',
				materialFocus:false,
				locationFocus:false,
				detail: {},
				goodNumber: null,
				flg: true,
				url: {
					getById: '/base/erpGoods/queryById',
					barcodeScanCheckMove: '/detail/bussInventoryDetails/barcodeScanCheckMove',

				}

			}
		},
		// onLoad:function(){
		// 	console.log("this.$Route.query",this.$Route);
		// 	let query = this.$Route.query
		// 	if(query){
		// 		this.annotation = query;
		// 		}
		// },
		onLoad: function(option) {
			const entity = JSON.parse(decodeURIComponent(option.item));
			this.detail = entity

		},
		created() {
			console.log("created");
			// this.getById(this.erpGoodsId);
		},
		methods: {
			handleMaterialInput(event) {
				if (this.detail.barcode != this.materialBarcode) {
					this.$tip.error('物料条码不匹配')
					return
				}
				console.log('Input changed:', this.materialBarcode);
				this.locationFocus = true;
				// 可以在这里添加更多的逻辑
			},
			handleLocationInput(event) {
				if (this.detail.goalLocation != this.locationBarcode) {
					this.$tip.error('库位码不匹配')
					return
				}
				console.log('Input changed:', this.locationBarcode);
				// 可以在这里添加更多的逻辑
			},
			clearBarcode() {
				this.materialBarcode = "";
				this.locationBarcode = ""
				this.materialFocus = true;
			},
			submitConfirm(detail) {
				if (detail.barcode != this.materialBarcode) {
					this.$tip.error('物料条码不匹配')
					return
				}
				if (detail.goalLocation != this.locationBarcode) {
					console.log("detail")
					console.log(detail)
					this.$tip.error('库位码不匹配')
					return
				}
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确认进行此操作吗？',
					success: function(res) {
						if (res.confirm) {
							//
							console.log('用户点击确定');

							that.$http.post(that.url.barcodeScanCheckMove, detail).then(res => {
								console.log(res)
								this.$tip.loaded();
								if (res.data.success) {

									// let entity = res.data.result[0];

								} else {
									uni.navigateBack({
										delta: 1, //返回层数，2则上上页
										success() {
											uni.$emit('barcode', {
												barcode: detail.barcode
											})
										},
									});
									this.$tip.error(res.data.message)
								}
							}).catch(() => {
								this.$tip.loaded();
								this.$tip.error('提交失败')
							});

							uni.navigateBack({
								delta: 1, //返回层数，2则上上页
								success() {
									// 发送消息到父页面

									// 关闭当前页面，返回上一页面
									uni.navigateBack();
								},
							});

							// 用户点击了确定，执行相应的逻辑
						} else if (res.cancel) {
							console.log('用户点击取消');
							// 用户点击了取消，执行相应的逻辑
						}
					}
				});

				uni.$emit('refreshParentPage', {});
				console.log(detail)
				// this.$http.get(this.url.getById, {
				// 	params: {
				// 		id: this.erpGoodsId
				// 	}
				// }).then(res => {
				// 	//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
				// 	this.erpGoods = res.data.result
				// 	console.log("entity", this.erpGoods)
				// 	//设置列表数据
				// 	if (res.data.success) {
				// 		console.log("res", res.data)

				// 	}


				// })
			},

			numberPlus() {
				if (this.flg) {
					this.goodNumber++
					this.flg = false
				} else {
					this.goodNumber--
					if (this.goodNumber == 0) {
						this.goodNumber = null
					}
					this.flg = true
				}
			}
		}
	}
</script>

<style>
	.input-border {
		border: 1px solid #ccc;
		/* 设置边框为灰色 */
		border-radius: 4px;
		/* 设置圆角 */
		padding: 2px 5px;
		/* 内边距 */
		margin: 4px;
		/* 外边距 */
		width: 80%;
		/* 宽度 */
		box-sizing: border-box;
		/* 防止宽度计算错误 */
	}

	.input-border {
		border: 1px solid #ccc;
		/* 设置边框为灰色 */
		border-radius: 4px;
		/* 设置圆角 */
		padding: 2px 5px;
		/* 内边距 */
		margin: 4px;
		/* 外边距 */
		width: 98%;
		/* 宽度 */
		box-sizing: border-box;
		/* 防止宽度计算错误 */
	}

	.cu-card.article>.cu-item .content .desc {
		flex: 0.2;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.border-class {
		border: 1px solid #000000;
		border-radius: 5px;
	}

	.container {
		display: grid;
		grid-template-columns: 1.3fr 2fr 1.3fr 2fr;
		/* 将容器分为两列，每列宽度相等 */
	}

	.left-view {
		background-color: red;
	}

	.right-view {
		background-color: blue;
	}
</style>